iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Modern Web

All In One NFT Website Development系列 第 7

Day 7【錢包登入區 - Login Button】Kitten or Ice Cream?

  • 分享至 

  • xImage
  •  

【前言】
先來回顧一下 Day2 Project 分析的使用者流程,今天先來做第一步的 「登入按鈕」 吧!因為自己負責前端的部分並沒有很多,所以如果時間允許的話,有點想做一個驗證是不是機器人的區塊來玩玩!

【(使用者看見的)前端與(後方運作的)後端】

  1. 使用者會看見登入錢包按鈕(按鈕應該要有一些特效)
    • 按下按鈕後要連到 MetaMask 系統
  2. 使用者點擊按鈕後出現 Loading 特效,同時跳出 Metamask 登入及連動同意
    • 同意後,要從 MetaMask 得到當前登入者的以太坊地址
  3. 使用者同意後出現登入介面,讓其輸入欲登入的角色編號
    • 得到欲登入的角色編號後,去後方資料庫查詢此地址是否真的擁有此 NFT
      // 資料庫建構的部分由其他夥伴負責,這邊我負責檢查 Tokens 的持有地址
  4. 成功登入後的畫面
    // 網頁互動的部分由其他夥伴負責,這邊我負責顯示登入成功 or 失敗

【頁面連結】
這裡使用 The React Router 來連動不同的頁面。首先在 command 引入 react-router-dom

npm install react-router-dom

以及在 App.js import 來做使用。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <AppContainer>
      <Router>
        <Switch>
          <Route exact path="/">
            <MetaMask />
          </Route>
          <Route exact path="/login">
            <AccountBox />
          </Route>
        </Switch>
      </Router>
    </AppContainer>
  );
}

export default App;

首先製作背景,先用太空超人來作範例,到時候實際成品會希望畫一隻太空超人版的恐龍!

import styled from "styled-components";
import img1 from "./399728.jpg";

export const Wrapper = styled.section`
  background-image: url(${img1});
  ...
  }
`;

調整 background-position 花費我超多時間,因為我一直去調整個 Wrapper 的 position,因為wrapper 在 index.jsx 中是包住整個按鈕的,所以圖片就會一直壓到登入按鈕或者兩個互相影響位置,最後才發現原來是要改 background-position

【錢包登入按鈕】

這個霓虹燈按鈕跟網路上很多類似的 CSS 是差不多概念,就不多作介紹了!這邊要注意的是如果要在 styled-components 裡面呼叫 JS 的變數名稱的話,都要加上 ${...} 來取用物件的方式使用。

const clrneon = "#66CCCC";

const StyledLink = styled(Link)`
	...
  color: ${clrneon};
  border: ${clrneon} 0.125em solid;
	...
	text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
  box-shadow: inset 0 0 0.5em 0 ${clrneon}, 0 0 0.5em 0 ${clrneon};
	position: relative;
  display: flex;
	...
	&:before {
		...
    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
  }
  &:after {
    ...
    box-shadow: 0 0 2em 0.5em ${clrneon};
    opacity: 0;
    transition: opacity 100ms linear;
  }
  &:focus {
    animation: rotate 1.5s linear infinite;
  }
  &:hover, &:focus {
    text-shadow: none;
  }
	...
`;

export function MetaMask(props) {

  return (
    <Wrapper>
      <StyledLink to="/login">
        LOGIN WITH METAMASK
      </StyledLink>
    </Wrapper>
  );
}

把所有元件組合起來的成果!有一種不知所云的塑膠迷因感,不過因為只是練習所以先暫時這樣吧!之後等美術做出樣本圖再換回正常的樣子xD

【MetaMask Logo】
這陣子發現 MetaMask 有一個開源的 3D-Logo 超可愛的,重點是狐狸會跟著滑鼠移動!除此之外還有一些驚為天人的特效,果然不是凡人能觸及的領域,身為一個普通人我還是直接 import 就好。

<script src="bundle.js"></script>

後來發現這樣 import 沒辦法在 react 裡面使用,只好利用下面這個方法把 Logo 放進去。

import { Helmet } from 'react-helmet';
import { Logo } from "./bundle.js"
...
export function MetaMask(props) {

  return (
    <Wrapper>
      <StyledLink to="/login">
        LOGIN WITH METAMASK
      </StyledLink>
			<Helmet >
			  <Logo />
			</Helmet>
    </Wrapper>
  );
}

悲慘的是我不管怎麼做都沒辦法讓 Logo 跟圖片重疊,總是會變成多一塊在最下面。我想很大的一個問題是我看不懂 MetaMask Logo JS 檔案的內容是怎麼產生的嗚嗚嗚。而且除了 Helmet ,其他把 JavaScript 放進去 export function return 的方法我也都不會,只好放棄把 Logo 放進去的想法。

【小結】
突然有一種當初在學 pointer 的感覺,就是不是完全地清楚自己到底在做什麼。差別只在於寫前端的時候編譯完就能看見結果,而在 C/C++ 中我看不見記憶體到底指到哪一塊。希望自己可以多多加油,而且可以提升一點美感,明天再來繼續把前端完成吧!

【參考資料】
GitHub - MetaMask/logo: A 3d take on the metamask logo, in browser, as a browserifyable module.
How to style your React-Router links using styled-components
4 Ways to Add External JavaScript Files in React


上一篇
Day 6【React】阿嬤妳怎麼沒感覺?
下一篇
Day 8【錢包登入區 - Loading Message】阿嬤為什麼妳有感覺?
系列文
All In One NFT Website Development32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言